<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        #navlist {
            position: relative;
        }

        #navlist li {
            margin: 0;
            padding: 0;
            list-style: none;
            position: absolute;
            top: 0;
        }

        #navlist li,
        #navlist a {
            height: 44px;
            display: block;
        }

        #home {
            left: 0px;
            width: 46px;
        }

        #home {
            background: url('images/img_navsprites_hover.gif') 0 0;
        }

        /* 由于该列表项包含一个链接，我们可以使用：hover伪类 */
        /* #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;}
         - 对于所有三个悬停图像，我们指定相同的背景位置，只是每个再向下45px */
        #home a:hover {
            background: url('images/img_navsprites_hover.gif') 0 -45px;
        }

        #prev {
            left: 63px;
            width: 43px;
        }

        #prev {
            background: url('images/img_navsprites_hover.gif') -47px 0;
        }

        #prev a:hover {
            background: url('images/img_navsprites_hover.gif') -47px -45px;
        }

        #next {
            left: 129px;
            width: 43px;
        }

        #next {
            background: url('images/img_navsprites_hover.gif') -91px 0;
        }

        #next a:hover {
            background: url('images/img_navsprites_hover.gif') -91px -45px;
        }
    </style>
</head>

<body>
    <ul id="navlist">
        <li id="home"><a href="default.asp"></a></li>
        <li id="prev"><a href="css_intro.asp"></a></li>
        <li id="next"><a href="css_syntax.asp"></a></li>
    </ul>
</body>

</html>
<!-- 
现在，我们希望我们的导航列表中添加一个悬停效果。
    :hover 选择器用于鼠标悬停在元素上的显示的效果
    提示： :hover 选择器可以运用于所有元素。

我们的新图像 ("img_navsprites_hover.gif") 包含三个导航图像和三幅图像：
因为这是一个单一的图像，而不是6个单独的图像文件，当用户停留在图像上不会有延迟加载。

我们添加悬停效果只添加三行代码：
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
 -->